<template>
  <div>
    <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
    <!-- title -->
    <div class="title" @click="$store.state.logging == 1 ? $router.push({path: '/user/userInfo'}) : $router.push({path: '/login'})">
      <div class="headPhoto"><span :style="{'background':'url(' + $store.state.user.img + ')'}"></span></div>
      <div class="userInfo">
        <p class="username">{{$store.state.user.name}}</p>
        <p class="userphone" v-show="$store.state.user.phone"><van-icon name="graphic" /> {{$store.state.user.phone}}</p>
      </div>
    </div>
    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="pending-payment" @click="forToBe1" />
        待付款
      </van-col>
      <van-col span="6">
        <van-icon name="records" @click="forToBe1" />
        待接单
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" @click="forToBe1" />
        待发货
      </van-col>
      <van-col span="6">
        <van-icon name="logistics" @click="forToBe1" />
        已发货
      </van-col>
    </van-row>

    <van-cell-group class="user-group">
      <van-cell icon="records" title="全部订单" is-link to="/order" />
    </van-cell-group>

    <van-cell-group class="user-bottom">
      <van-cell icon="points" title="我的积分" @click="forToBe2" is-link />

      <!-- coupon -->
      <coupon></coupon>

      <van-cell icon="map-marked" title="我的收获地址" is-link  to="/address" />
    </van-cell-group>
    <!-- tabbar -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from '../tabbar/tabbar'
import coupon from '../user/coupon'
import { Dialog } from 'vant';
export default {
  methods: {
    forToBe1() {
      Dialog.alert({
        message: '这位客人还没有点餐呢'
      }).then(() => {
        // on close
      });
    },
    forToBe2() {
      Dialog.alert({
        title: '暂无积分',
        message: '提示：每日点餐可以获取一定积分'
      }).then(() => {
        // on close
      });
    },
  },
  components: {
    tabbar,
    coupon
  }
};
</script>

<style lang="less" scoped>
  .title {
    display: flex;
    background-image: linear-gradient(180deg,#fff,#0af);
    padding: 6.666667vw 4vw;
    color: #fff;
    align-items: center;
    .headPhoto {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden; 
      span {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-size: 100% 100%!important;
      }
    }
    .userInfo {
      overflow: hidden;
      margin-left: 4.8vw;
      flex-grow: 1;
      p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .username {
        font-size: 5vw;
        margin-bottom: 2.133333vw;
        font-weight: 700;
        display: flex;
        align-items: center;
      }
      .userphone {
        display: flex;
        align-items: center;
        font-size: 1vw;
        .van-icon-graphic {
          margin-right: 3px;
        }
      }
    }
  }
  .user {
    &-poster {
      width: 100%;
      height: 53vw;
      display: block;
    }
    &-group {
      margin-bottom: 15px;
    }
    &-links {
      padding: 15px 0;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      .van-icon {
        display: block;
        font-size: 24px;
      }
    }
  }
  .user-bottom {
    margin-bottom: 50px;
  }
</style>